<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>首次绑定账号密码</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/login.css?v=20221115">
    <link rel="stylesheet" href="/assets/css/common.css">
    <script src="/assets/js/core/jquery.3.2.1.min.js"></script>
</head>
<body class="login">
	<div class="wrapper wrapper-login">
		<div class="container container-login animated fadeIn">
			<h4 class="login-title">首次绑定账号密码</h4>
			<div class="login-form">
				<form id="comment-form" method="POST" action="{{ URL::current() }}">
					<input type="text" name="phone" value="{{ old('phone') }}" class="login-phone-input" placeholder="请输入手机号码" id="phone" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')">
					<div class="login-phone-msn-row">
						<input type="text" name="msncode" value="{{ old('msncode') }}" placeholder="请输入验证码" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')">
						<span id="action_code" class="active" onclick="settime();">获取验证码</span>
					</div>
					<input type="text" name="password" value="{{ old('password') }}" class="login-phone-input" placeholder="请输入登录密码；支持数字、英文、符号" οnkeyup="this.value=this.value.replace(/[^\w_]/g,'');">
					<input type="hidden" id="unionid" name="unionid" value="{{ $unionid }}">
					<input type="hidden" id="time" name="time" value="{{ $time }}">
					<input type="hidden" id="sign" name="sign" value="{{ $sign }}">
					@csrf
					<div class="login-phone-radio-row">
						<input type="checkbox" checked="" name="">
						<span>我已阅读并同意天天外链 <a href="https://nilife.cn/news/1018.html" target="_blank">用户注册协议</a></span>
					</div>
					<button type="submit" class="login-phone-button" style="font-size: 16px;">立即绑定</button>
					<div class="alert alert-danger" style="float:left;width: 100%;display: none;"></div>
					<div style="float:left;width: 100%;" id="notice">
						@include('admin.layouts.msg')
					</div>
	                <div class="text-block text-center my-3">
	                    <span class="text-small font-weight-semibold">首次注册需绑定手机号和密码，后续即可扫码直接登录。</span>
	                </div>
				</form>
			</div>
		</div>
	</div>
	<!-- <script src="/assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> -->
	<script src="/assets/js/core/bootstrap.min.js"></script>
	<script type="text/javascript">
		var countdown = 0;
		$(document).ready(function(){
            countdown = localStorage.getItem("countdown") || 0;
            if (countdown != "0" && !isNaN(countdown)) {  
                $("#action_code").html("重新发送 ( " + countdown + " )").removeClass("active");  
                timedown();  
            }  
        });  
        function timedown() {  
            if (countdown == 0) {  
                $("#action_code").html("获取验证码").addClass("active");  
                return clearTimeout();//清除定时，没有的话会导致后面每次减一越来越快  
            } else {  
                $("#action_code").html(countdown+"s 后重新发送").removeClass("active");
                countdown = countdown-1;
                localStorage.setItem("countdown",countdown);
            }  
            setTimeout(function() {  
                timedown();  
            }, 1000);//定时每秒减一  
        }  
        //手机验证,判断60s之后再发送验证码  
        function settime() {
        	$("#notice").hide();
        	if (countdown > 1) {
        		$(".alert").html("请在 "+countdown+"s 后重新获取验证码!").removeClass("alert-success").addClass("alert-danger").show();  
                return;
        	}
            var phone = document.getElementById("phone");  
            var check_phone_number = /^1[3456789]\d{9}$/;  
            if (phone.value.length == 0) {  
                $(".alert").html("手机号不能为空").removeClass("alert-success").addClass("alert-danger").show();  
                return;  
            }  
            if (phone.value.length != 11) {  
                $(".alert").html("请输入有效的手机号！").removeClass("alert-success").addClass("alert-danger").show();  
                return;  
            }  
            if (!phone.value.match(check_phone_number)) {  
                $(".alert").html("请输入有效的手机号").removeClass("alert-success").addClass("alert-danger").show();  
                return;  
            } else {
				var unionid = $("#unionid").val();
				var time = $("#time").val();
				var sign = $("#sign").val();
                //短信发送  
                $.ajax({
		            "url": "/api/version/1/send_msn",
		            "type": "GET",
		            data: {
		                "unionid": unionid,
		                "time": time,
		                "sign": sign,
		                "phone": phone.value,
		            },
		            success: function(res){
		                if (res.status == "success") {
		                	countdown = 60;
		                	localStorage.setItem("countdown",60);
		                	timedown();  
		                    $(".alert").html(res.msg).removeClass("alert-danger").addClass("alert-success").show();
		                } else {
		                    $(".alert").html(res.msg).removeClass("alert-success").addClass("alert-danger").show();
		                }
		            },
		            error: function(err){
		                $(".alert").html("请求失败,请稍后重试！").removeClass("alert-success").addClass("alert-danger").show();
		            }
		        });
            }  
        }  
	</script>
</body>
</html>